<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘房-精品单身青年精英白领公寓出租</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/css/home2.css">

</head>
<body>
<!--底部导航栏begin-->
<%@ include file="../nav/headnav.jsp" %>
<!--底部导航栏end-->
<div class="container-fluid" id="suolue">
    <div class="row">
        <div class="col-sm-9 col-md-3" style="background-color: #121F2C;height: 522px">
            <div>
                <h1 style="color: #204d74">品质生活</h1>
                <h1 style="color: #204d74">淘房等你</h1>
                <br>
                <br>
                <h2 style="color: bisque">淘房-淘一个温馨的小窝</h2>
<%--                <div class="col-sm-6 col-md-9">--%>
<%--                    <input type="text" class="form-control" placeholder="搜索房源">--%>
<%--                </div>--%>
<%--                <button type="submit" class="btn btn-default">搜索</button>--%>
                <br>
                <img class="qrCode" src="http://${path2}/img/QrCode.png" alt="加载失败" style="width: 180px;height: 180px">
                <h2 style="color: #e7c3c3">联系我们</h2>
            </div>
        </div>
        <!-- 轮播begin -->
        <div id="myCarousel" class="carousel slide col-sm-12 col-md-9" style="float: right;">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://${path2}/img/banner1.jpeg" alt="First slide">
                </div>
                <div class="item">
                    <img src="http://${path2}/img/banner2.jpeg" alt="Second slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"><span _ngcontent-c3="" aria-hidden="true"
                                       class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"><span _ngcontent-c3="" aria-hidden="true"
                                       class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
        <!-- 轮播end -->
    </div>
</div>
<br>
<br>
<br>

<div class="container-fluid" id="title">
    <div class="row">
        <div class="col-sm-6 col-md-offset-1 col-md-4" style="float: left">
            <h1>品质整租</h1>
            <p>高品质整租房源</p>
        </div>
        <div class="input-group col-sm-6 col-md-3" style="margin-top: 35px">
            <input type="text" class="form-control" id="whole_search" placeholder="输入小区名">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" id="whole_btn">搜整租</button>
            </span>
        </div>

        <div class="col-sm-6 col-md-2" style="float: right;margin-bottom: 10px; margin-right: 30px">
            <a href="/taofang/home/WholeRent" style="font-size: x-large">更多整租</a>
        </div>
    </div>
</div>
<!-- 缩略begin -->
<div class="container-fluid" id="suolue2">
    <div class="row">
        <c:forEach items="${house}" var="h">
            <div class="col-sm-6 col-md-3 col-md-offset-1">
                <div class="thumbnail" onclick="myimg(${h.id})">
                    <img src="http://${path2}/img/${h.imageUrl}" alt="通用的占位符缩略图">
                    <div class="caption">
                        <h4 style="font-weight: 900;text-align: center">
                            <span>${h.rentType}·</span><span>${h.residentialQuarters}</span></h4>
                        <p style="text-align: center">
                                ${h.houseType}<span>/${h.area}</span>
                            <span class="text-danger">优惠价:${h.rentMoney}元/月</span>
                            <br>
                            <span>门牌号：${h.doorplate}</span>
                            <span>地区：${h.region}</span>
                            <span>朝向：${h.orientate}</span>
                        </p>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<!-- 缩略图end -->
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid" id="together">
    <div class="row">
        <div style="text-align: center">
            <h2>生活社区-你的合租助手</h2>
            <br>
            <br>
            <p>有这样一群人，他们有着不同的背景，却有着相同的频率和共鸣。在这里你会遇到有才的新伙伴，事业的新榜样，感情的新缘分。</p>
            <br>
            <div class="input-group col-sm-6 col-md-4 col-md-offset-4" style="margin-top: 35px">
                <input type="text" class="form-control" id="together_search" placeholder="输入小区名">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="together_btn">搜合租</button>
                </span>
            </div>
            <br>
            <a href="/taofang/home/togetherRent" style="font-size: x-large">查看更多</a>
            <br>
            <br>
            <br>
            <br>
            <div class="col-sm-12 col-md-6" style="float: left;">
                <img src="http://${path2}/img/partener1.jpeg" alt="加载失败" class="col-sm-12 col-md-12">
                <h2 style="font-size: xx-large">意向匹配</h2>
            </div>
            <div class="col-sm-12 col-md-6" style="float: right;">
                <img src="http://${path2}/img/partener2.jpeg" alt="加载失败" class="col-sm-12 col-md-12">
                <h2 style="font-size: xx-large">推荐室友</h2>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid" id="suolue3">
    <div class="row">
        <div style="text-align: center">
            <h2>关于淘房</h2>
            <br>
            <br>
            <br>
            <div id="myCarousel2" class="carousel slide col-xs-12 col-md-9" style="float: left;">
                <img src="http://${path2}/img/home.jpeg" alt="加载失败" class="col-xs-12 col-md-12" style="height: 529px">
            </div>
            <div class="col-sm-9 col-md-3" style="background-color: #EE7500;height: 529px">
                <div>
                    <h3>能在淘房里找到志趣相投的朋友</h3>
                    <h3>，感受到家的温暖。我们的目标</h3>
                    <h3>是打造租房时代的美好回忆，让</h3>
                    <h3>租房不单单只是为了生存，更是</h3>
                    <h3>为了让我们的生活更美好。</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部导航栏begin-->
<%@ include file="../nav/footnav.jsp" %>
<!--底部导航栏end-->

<script src="${path}/plugins/jquery-3.4.1.js"></script>
<script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>

    //跳转具体房源信息页面
    function myimg(house_id) {
        window.location = "/taofang/Detail/zhengzuxiangxi/" + house_id;
    }

    $(function () {
        $("#whole_btn").click(function () {
            let sea =  $("#whole_search").val();
            // alert(sea)
            window.location="/taofang/House/zhengSec/"+sea;
        });
    });

    $(function () {
        $("#together_btn").click(function () {
            let sea =  $("#together_search").val();
            // alert(sea)
            window.location="/taofang/House/HezuSec/"+sea;
        });
    });

</script>

</body>
</html>